<template>
  <div>
    <!-- 搜索和添加 -->
    <a-row :gutter="[16, 16]">
      <a-col :span="7"
        ><a-input-search
          allowClear
          placeholder="搜索用户"
          v-model="queryInfo.query"
          @search="$store.dispatch('getUsers', queryInfo)"
          enter-button
      /></a-col>
      <a-col :span="6">
        <a-button type="primary" @click="adduser"> 添加用户</a-button>
      </a-col>
    </a-row>

    <!-- 表格部分 -->
    <a-table
      :pagination="false"
      :columns="columns"
      :data-source="userList.users"
      rowKey="id"
    >
      <span slot="action" slot-scope="text, record">
        <a-row :gutter="[16, 16]">
          <a-tooltip>
            <template slot="title"> 分配权限</template>
            <a-col :span="8"
              ><a-button
                type="primary"
                icon="deployment-unit"
                @click="disuser(record)"
            /></a-col>
          </a-tooltip>
          <a-tooltip>
            <template slot="title"> 修改用户信息 </template>
            <a-col :span="8"
              ><a-button
                type="primary"
                icon="setting"
                @click="alter(record.id)"
            /></a-col>
          </a-tooltip>
          <a-col :span="8"
            ><a-popconfirm
              @confirm="delUser(record.id)"
              title="确定删除？"
              ok-text="Yes"
              cancel-text="No"
            >
              <a-button type="danger" icon="rest" /> </a-popconfirm
          ></a-col>
        </a-row>
      </span>
      <span slot="mg_state" slot-scope="text, record">
        <a-switch
          :defaultChecked="record.mg_state"
          @click="chaSwitch(record)"
        />
      </span>
    </a-table>

    <!-- 分页器 -->
    <a-pagination
      class="pagination"
      :v-model="queryInfo.pagenum"
      :page-size-options="pageSizeOptions"
      :total="userList.total"
      show-size-changer
      :page-size="queryInfo.pagesize"
      @showSizeChange="onShowSizeChange"
      @change="changeCurrent"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '10'">{{ props.value }}条/页</span>
        <span v-if="props.value === '10'">全部</span>
      </template>
    </a-pagination>

    <!-- 添加用户 -->
    <adduser @refresh="refresh" ref="adduser"></adduser>
    <!-- 修改用户 -->
    <alteruser @alter1="alter1" ref="alteruser"></alteruser>
    <!-- 分配权限 -->
    <a-modal v-model="disvisible" title="Basic Modal" @ok="handleOk">
      <div>
        <p>当前用户:{{ userRecord.username }}</p>
        <p>当前角色:{{ userRecord.role_name }}</p>
        <p>
          分配新角色:
          <a-tree-select
            v-model="selectedRoleId"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择"
            tree-default-expand-all
          >
            <a-tree-select-node
              v-for="item in roleList"
              :key="item.id"
              :value="item.id"
              :title="item.roleName"
            />
          </a-tree-select>
        </p>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { columns } from "@/utils/usercolumns";
import { mapState } from "vuex";
import adduser from "@/views/users/userscompontents/adduser";
import alteruser from "@/views/users/userscompontents/alteruser";
export default {
  data() {
    return {
      //分页
      pageSizeOptions: ["1", "3", "5", "10"],
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 100,
      },
      columns: columns,
      //分配权限
      disvisible: false,
      userRecord: {},
      selectedRoleId: "",
    };
  },
  components: { adduser, alteruser },
  mounted() {
    //   派发用户列表网络请求
    this.getList();
  },
  computed: {
    //计算用户列表
    ...mapState({
      roleList: (state) => state.power.roleList || [],
      userList: (state) => state.home.userList || [],
    }),
  },
  methods: {
    getList() {
      this.$store.dispatch("getUsers", this.queryInfo);
    },

    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.queryInfo.pagesize = pageSize;
      this.getList();
    },
    // 页码改变
    changeCurrent(page, pageSize) {
      this.queryInfo.pagenum = page;
      //   派发用户列表网络请求
      this.getList();
    },
    //按钮发生改变
    chaSwitch(record) {
      this.$store.commit("CHENCKSWITCH", record.id);
      this.$nextTick(async () => {
        const { id, mg_state } = record;
        try {
          await this.$store.dispatch("getChenckSwitch", { id, mg_state });
          this.$message.success("修改成功！");
        } catch (error) {
          alert(error.message);
          this.$message.warning("修改失败！");
        }
      });
    },
    //添加用户按钮
    adduser() {
      this.$refs.adduser.visible = true;
    },
    //页面刷新
    refresh() {
      //接受子组件刷新
      this.getList();
    },
    alter1() {
      this.getList();
    },
    //修改用户信息
    alter(id) {
      this.$refs.alteruser.visible = true;
      this.$store.dispatch("getalter", id);
    },
    //删除
    async delUser(id) {
      try {
        await this.$store.dispatch("delUser", id);
        this.getList();
        this.$message.success("删除成功！");
      } catch (error) {
        this.$message.warning("删除失败！");
      }
    },
    //分配权限
    disuser(record) {
      this.userRecord = record;
      this.$store.dispatch("getRole");
      this.selectedRoleId = "";
      this.disvisible = true;
    },
    // 分配角色确定
    async handleOk(e) {
      // console.log(1111);
      if (!this.selectedRoleId) {
        return this.$message.success("请选择一个角色分配！");
      }
      const { id } = this.userRecord;
      const rid = this.selectedRoleId;
      try {
        await this.$store.dispatch("disRole", { id, rid });
        this.disvisible = false;
        this.$message.success("添加权限成功！");
        this.getList();
      } catch (error) {
        this.$message.warning("添加权限失败！");
      }
      
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  padding-top: 20px;
}
</style>